<template>
  <div class="flex">
    <div
      v-for="(item,index) in devices"
      :key="index"
      class="card-container"
      @click="getCropGrowthes(item)"
    >
      <el-card :body-style="{ padding: '0px' }">
        <img :src="item.picture" class="image">
        <div style="padding: 12px 0;font-size: 14px;justify-content: center;" class="flex">
          {{ item.name }}
        </div>
      </el-card>
    </div>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="790px"
      @close="dialogClose"
    >
      <div class="flex" style="align-items:center;">
        <el-switch
          v-model="autoplay"
          active-text="播放"
          inactive-text="暂停"
          class="mr12"
        />
        <el-radio-group v-model="ordType" size="mini" class="ml12">
          <el-radio-button label="asc">正序</el-radio-button>
          <el-radio-button label="desc">倒序</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="params.created_at"
          class="mlauto"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          align="center"
        />
      </div>
      <div class="h12" />
      <el-carousel :interval="interval" :autoplay="autoplay" height="400px" arrow="always" indicator-position="none">
        <el-carousel-item v-for="(item,index) in cropGrowthes" :key="index">
          <el-image
            :src="item.picture_thumb"
            :preview-src-list="srcList"
            fit="contain"
          >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>

<script>
import { mqjc } from '@/api/device'
import { all } from '@/api/cropGrowth'
import { mapGetters } from 'vuex'
import { removeEmptyField } from '@/utils'
export default {
  data() {
    return {
      interval: 5000,
      autoplay: true,
      dialogVisible: false,
      devices: [],
      device: {},
      cropGrowthes: [],
      title: '',
      ordType: 'asc',
      params: {
        created_at: ''
      }
    }
  },
  computed: {
    ...mapGetters(['project']),
    srcList() {
      return this.cropGrowthes.map(val => val.picture)
    }
  },
  watch: {
    'params.created_at': {
      handler(newVal, oldVal) {
        this.all()
      },
      immediate: true
    },
    ordType(newVal) {
      this.cropGrowthes = this.cropGrowthes.reverse()
    }
  },
  created() {
    this.mqjc()
  },
  methods: {
    async mqjc() {
      const { data } = await mqjc(this.project.id)
      this.devices = data
    },
    async getCropGrowthes(device) {
      this.device = device
      this.all()
    },
    async all() {
      if (this.device && this.device.serialno) {
        const { data } = await all(this.device.serialno, removeEmptyField(this.params))
        this.title = this.device.name
        this.cropGrowthes = data
        this.dialogVisible = true
      }
    },
    dialogClose() {
      this.device = {}
      this.cropGrowthes = []
      this.ordType = 'asc'
    }
  }
}
</script>

<style lang="scss" scoped>
.flex{
  flex-wrap: wrap;
}
.card-container{
  width:23%;
  margin:1%;
  cursor:pointer;
}
 .image {
    width: 100%;
    display: block;
  }
</style>
